“It’s maybe not the best place to look [for a camera, ed.]” a subject explains after looking at Tesco’s homepage (above), reasoning that they only sell groceries at their online store due to a narrow set of featured products.
During our most recent usability study of 18 large e-commerce sites, first-time users were observed to rely heavily on the main navigation options and the homepage content to determine the type of site they’d landed on.
Indeed, whenever landing at a new site’s homepage, 25% of the test subjects consistently scrolled far down the homepage and then back up again in order to quickly establish an impression of the site’s product range. Alas, this lead to many misconceptions as numerous of the tested sites displayed a very narrow selection of their product catalog on the homepage.
“Okay, this is not a store where I’ll find a laptop sleeve,” a subject exclaimed as Zappos’ homepage loaded. Note how all the featured content on the homepage relates to shoes, even though Zappos also sells clothing, bags, kitchenware, cosmetics, and more.
First-time users with little to no prior knowledge of the site’s brand will largely base their understanding of the site’s product range based on the homepage content and main navigation categories. If the homepage content therefore displays a very narrow selection of products, many of these first-time users are likely to adopt a similarly narrow understanding of the site’s product catalog as a whole.
These kinds of misinterpretations can be tremendously harmful to a site as users will rarely looks for products they don’t believe the site will carry. In other words, they won’t look for those product types during their current shopping sessions, and perhaps even more damaging, they are unlikely to return the site when interested in those types of products in the future. Yet, out of 50 of the largest US e-commerce sites, 28% currently display an overly narrow selection of product types on their homepage. The negative website usability implications are both immediate and long-lived.
Feature a Diverse Selection of Product Types on the Homepage
In order to avoid users misinterpreting or underestimating a site’s product range, it’s recommended to demonstrate the breadth of its product catalog on the homepage by ensuring a broad selection of different product types are featured. This is particularly important for sites selling a diverse selection of products. A glance over the homepage should indicate the store’s product diversity.
“That’s nice, with the different themes” a subject remarked on the Go Outdoors page. The big photos indicate a broad range of “outdoors” products, from BBQing to tents, and camping gear to kayak kits. When scrolling further down the page, climbing and cycling gear are revealed as well. This is an excellent way to display (and link to) a diverse set of product categories.
Not all product categories are created equal of course. Important categories (i.e. particular popular and profitable ones) can and should claim significant portions of the homepage’s screen real estate, but if you want to avoid having first-time visitors underestimate your product range, some space must be dedicated to other product types too. In the earlier Zappos example, it isn’t unreasonable that shoes take up a significant amount of their homepage, but it would certainly be smart to feature a couple of the other product categories too so that first-time visitors won’t draw false conclusions about their product catalog.
Whether the featured product types are specific products or categories didn’t prove to have any influence on the subjects’ ability to correctly infer the site’s product range from the homepage. Users take a quick glance at the thumbnails on the homepage and form a quick impression from that, so whether they represent specific products or categories doesn’t have much effect on that initial impression. (However, if your homepage feature products, remember that any collection of featured products should link to its parent category.)
Feature at Least 30% of the Main Categories
Because images demand so much attention, users primarily rely on the homepage visuals to infer the site’s product catalog. While other types of visuals (graphics, button-like elements, fonts, etc) can be used to draw attention to the breadth of your product catalog, images are typically the most dominant, and it’s therefore important that the product types you feature are displayed with an image or at least thumbnail.
Pixmania does a great job of listing a broad range of product categories along with the most popular sub-categories and a featured product from each category (typically an offer) – this way a broad selection of products is visually represented on the homepage (50% of the top-level categories) and the sub-categories also help users select a well-defined scope right from the homepage.
While it’s seldom feasible to visually feature all the product types available on a site, most of the sites where first-time users were correctly able to infer the type of site, visually featured at least 30-40% of their main product categories on the homepage (i.e. the first level of product categories).
Compared to Pixmania, notice how only 2 of 9 main product categories are visually featured at Wayfair. By only visually featuring furniture and decor products on their homepage, first-time user are less likely to adopt a complete picture of Wayfair’s product catalog which also includes product types such as gardening tools, power generators, jewelry, appliances, and more.
When visually showcasing 30-40% of the main product categories on the homepage, it will typically be insufficient to rely solely on e.g. “popular products on sale”, “new arrivals”, or “current seasonal items”. While these can (and should) be a vital part of the featured homepage content, they will typically not ensure the necessary product diversity on their own.
Depending on the complexity of your homepage, the breadth of your product catalog, and the level of personalization implemented, you need to either 1) build a system that intelligently swaps the showcased products in any featured sales, products and categories, to ensure a sufficiently diverse set of the top-level product categories are featured on the homepage at all times, or 2) manually curate these sections to ensure sufficient diversity.
Which strategy to choose is highly site-specific as it depends on a wide range of factors, including the total breadth of the site’s product catalog, its volume of sales, and available development resources.
The Litmus Test
Regardless of the precise percentage of featured top-level product categories, chosen implementation type, and whether you feature products or categories, the overall goal is to ensure that the homepage conveys a visually representative picture of the site’s offerings so that first-time visitors will instinctively draw appropriate conclusions about the type of site they’ve just landed on and what they can expect to find on it – both in today’s shopping session and in future ones.
The litmus test is easy: does a quick glance over your homepage adequately convey your store’s product diversity? If not, first-time visitors may be drawing false conclusions about the scope of your site’s product catalog.
This article presents the research findings from just 1 of the 650+ UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” e-commerce user experience.
